<template>
  <div class="table-container">
    <el-table
      :data="tableData"
      border
      style="width: 100%; height: 100%"
      height="100%"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      @row-click="handleRowClick"
    >
      <!-- 单选框列 -->
      <el-table-column label="选择" width="60" align="center">
        <template slot-scope="{ row }">
          <el-radio
            v-model="selectedId"
            :label="row.id"
            style="margin-right: 0 !important;"
            @change="handleSelect(row)"
          >
            <span/>
          </el-radio>
        </template>
      </el-table-column>

      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column label="头像" min-width="50">
        <template slot-scope="scope">
          <div class="avatar-container">
            <img
              :src="scope.row.avatar || defaultAvatar"
              alt="用户头像"
              class="avatar-img"
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" min-width="100">
        <template #default="{row}">
          <el-button
            type="text"
            @click="$emit('on-view', row)"
            :style="{color: themeColor}"
          >
            {{ row.name }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号" min-width="80"></el-table-column>
      <el-table-column label="性别" width="100">
        <template slot-scope="scope">
          <span>{{ genderMap[scope.row.gender] || '未知' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="grade" label="年级" min-width="50"></el-table-column>
      <el-table-column prop="region" label="地区" min-width="120"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="120"></el-table-column>
      <el-table-column label="学员端状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.state === '1' ? 'success' : 'danger'">
            {{ scope.row.state === '0' ? '未开通学员端权限' : '已开通学员端权限' }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'StudentTable',
  props: {
    tableData: {
      type: Array,
      required: true
    },
    genderMap: {
      type: Object,
      required: true
    },
    themeColor: {
      type: String,
      required: true
    },
    defaultSelectId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      selectedId: this.defaultSelectId // 当前选中的行ID
    }
  },
  methods: {
    handleRowClick(row) {
      this.selectedId = row.id
      this.handleSelect(row)
    },
    handleSelect(row) {
      this.$emit('on-select', row) // 向父组件传递选中的行
    }
  }
}
</script>

<style scoped>
.table-container {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 20px;
}

.avatar-container {
  display: flex;
  justify-content: center;
}

.avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e5e6eb;
}

.table-container {
  flex: 1;
  overflow-y: auto; /* 保持纵向滚动 */
  margin-bottom: 20px;
  /* 预留滚动条空间，避免表格内容跳动 */
  padding-right: 4px;
}

/* -------------------------- 滚动条美化（WebKit 内核：Chrome/Safari/Edge） -------------------------- */
/* 1. 隐藏原生滚动条的默认外观 */
.table-container::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
  height: 8px; /* 横向滚动条高度（如果需要） */
}

/* 2. 滚动条轨道（背景） */
.table-container::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道底色 */
  border-radius: 4px; /* 轨道圆角 */
}

/* 3. 滚动条滑块（可拖动部分） */
.table-container::-webkit-scrollbar-thumb {
  background: #c0c0c0; /* 滑块默认颜色 */
  border-radius: 4px; /* 滑块圆角 */
  transition: background 0.3s ease; /* hover 过渡效果 */
}

/* 4. 滑块 hover 状态 */
.table-container::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0; /* 滑块 hover 加深颜色 */
}

/* 5. 滚动条边角（轨道与滑块的交汇处） */
.table-container::-webkit-scrollbar-corner {
  background: #f1f1f1;
}

/* -------------------------- 滚动条美化（Firefox 适配） -------------------------- */
.table-container {
  /* Firefox 滚动条宽度 + 轨道样式 */
  scrollbar-width: thin; /* 可选：auto/thin/none */
  scrollbar-color: #c0c0c0 #f1f1f1; /* 滑块颜色 轨道颜色 */
}

/* -------------------------- 表格其他样式（保持不变） -------------------------- */
.avatar-container {
  display: flex;
  justify-content: center;
}

.avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e5e6eb;
}
</style>
